<template>
	<view class="page">
		<view class="lot-record-list">
			<view v-for="(item, index) in lotRecordList" :key="index" class="lot-record-list-block" :style="index == 0 ? 'color: #FE6A00;' : 'color: #9A9A9A' ">
				<view class="lot-record-list-info">
					<text class="lot-record-list-uid">{{item.uid}}</text>
					<text class="lot-record-list-type">{{index == 0 ? "领先" : "出局"}}</text>
					<text class="lot-record-list-time">{{formatRecordTime(item.date)}}</text>
				</view>
				<text class="lot-record-list-price">￥{{item.price}}</text>
			</view>
			<cl-loadmore v-if="lotRecordList.length >= 20" background-color="#fff" :loading="loading" :finish="finish">没有更多了</cl-loadmore>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lotId: '',
				loading: false,
				finish: false,
				lotRecordList: [],
				lastRId: null,
				isRefresh: false
			}
		},
		methods: {
			// 网络请求是否成功的判断
			checkSucess(res) {
				let isSuccess = false;
				if (res.data.statusCode == "200") {
					if (res.data.msg == "success") {
						isSuccess = true;
					}
				}
				return isSuccess;
			},
			loadContent() {
				// 进入页面加载初数据
				this.$common.request(this.$serverUrl + "lotRecord/" + this.lotId + "?pageSize=20", null, "GET", this.successCallbackByDetail);
			},
			// 加载更多
			loadMore() {
				this.goLoading()
				setTimeout(() => {
					this.requestUrl(this.$serverUrl + "lotRecord/" + this.lotId + "?pageSize=20&lastRId=" + this.lastRId);
				}, 500)
			},
			// 请求网络（特殊），获取对应tab下的内容
			requestUrl(url) {
				console.log(url);
				uni.request({
					url: url,
					method: "GET",
					success: (res) => {
						if (this.checkSucess(res)) {
							// 没有内容更改状态
							if (res.data.data.length == 0) {
								this.goNoMore()
								uni.stopPullDownRefresh();
								return;
							}
							// 将数据加载到对应位置，并记录最后一条的lotId
							if (this.isRefresh) {
								this.lotRecordList = res.data.data;
								this.isRefresh = false;
							} else {
								this.lotRecordList = this.lotRecordList.concat(res.data.data);
							}
							this.lastRId = this.lotRecordList[this.lotRecordList.length - 1].rId;
							uni.stopPullDownRefresh();
							this.goStart()
						} else {

						}
					}
				})
			},
			successCallbackByDetail(res) {
				if (this.checkSucess(res)) {
					// 没有内容更改状态
					if (res.data.data.length == 0) {
						this.goNoMore()
						uni.stopPullDownRefresh();
						return;
					}
					this.lotRecordList = this.lotRecordList.concat(res.data.data);
					this.lastRId = this.lotRecordList[this.lotRecordList.length - 1].rId;
					this.goStart()
				}
				uni.stopPullDownRefresh();
			},
			formatRecordTime(date) {
				let time = new Date(date.replace(/-/g, "/"));
				let now = new Date();
				let mouth = time.getMonth() + 1 < 10 ? "0" + (time.getMonth() + 1) : time.getMonth() + 1;
				let day = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
				let hour = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
				let min = time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
				let sec = time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
				if (time.getFullYear() < now.getFullYear()) {
					return year + "." + mouth + "." + day + " " + hour + ":" + min + ":" + sec;
				} else {
					return mouth + "." + day + " " + hour + ":" + min + ":" + sec;
				}
				return time;
			},
			goStart() {
				this.loading = false;
				this.finish = false;
			},
			goLoading() {
				this.loading = true;
			},
			goNoMore() {
				this.finish = true;
			}
		},
		// 触底事件
		onReachBottom() {
			if (!this.lotRecordList.length < 20) {
				return;
			}
			this.goStart();
			this.loadMore();
		},
		onPullDownRefresh() {
			this.isRefresh = true;
			setTimeout(() => {
				this.requestUrl(this.$serverUrl + "lotRecord/" + this.lotId + "?pageSize=20");
			}, 500)
		},
		onLoad(option) {
			this.lotId = option.lotId;
			console.log(this.lotId)
			this.loadContent()
		},
	}
</script>

<style>
	.lot-record-list {
		background-color: #F2F1F6;
	}

	.lot-record-list-block {
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 15rpx;
		border-bottom: 2rpx solid #EAEAEA;
	}

	.lot-record-list-uid {
		display: inline-block;
		width: 80rpx;
		margin-left: 5rpx;
		margin-right: 25rpx;
	}

	.lot-record-list-type {
		margin-right: 25rpx;
	}

	/deep/ .cl-divider__text {
		background-color: #F2F1F6 !important;
	}
</style>
